<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>岗位自动补人</title>

    <script src="util.js"></script>
    <script src="./req.js"></script>
    <style>
        html {
            background: #EEE;
        }
        
        .container {
            display: flex;
            justify-content: space-between;
        }
        
        .top_container {
            width: 22%;
            background: #FFF;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 600px;
        }
        
        .item_container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
        
        .item_div {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4px;
        }
        
        .item_container>.item {
            font-size: 10px;
        }
        
        .item_container>.item:nth-child(1) {
            padding: 10px;
            margin: 10px;
            width: 120px;
            height: 120px;
        }
        
        .item_container>.item:nth-child(2) {
            padding: 10px;
            width: 60px;
            height: 60px;
        }
        
        .item_container>.item:nth-child(3) {
            padding: 10px;
            margin: 10px;
            width: 60px;
            height: 60px;
        }
        
        .item_container>.item:nth-child(4) {
            padding: 10px;
            margin: 10px;
            width: 120px;
            height: 120px;
        }
        
        .item>div:nth-child(2) {
            font-size: 3px;
        }
    </style>

</head>

<body>

    <div class="container">

        <!-- <div class="top_container">
            <div style="font-size: 20px; font-weight: 600;">位置1</div>
            <div class="item_container">

                <div class="item">
                    <div class="item_div" style=" background: RED;"> 姓名：XXX<br> 体力:100 </div>
                    <div style="text-align: center;">工程师</div>
                </div>
                <div class="item">
                    <div class="item_div" style=" background: RED;"> 姓名：XXX<br> 体力:100 </div>
                    <div style="text-align: center;">工程师</div>
                </div>
                <div class="item">
                    <div class="item_div" style=" background: RED;"> 姓名：XXX<br> 体力:100 </div>
                    <div style="text-align: center;">工程师</div>
                </div>
                <div class="item">
                    <div class="item_div" style=" background: RED;"> 姓名：XXX<br> 体力:100 </div>
                    <div style="text-align: center;">工程师</div>
                </div>
                <div class="item">
                    <div class="item_div" style=" background: RED;"> 姓名：XXX<br> 体力:100 </div>
                    <div style="text-align: center;">工程师</div>
                </div>
            </div>
        </div> -->
    </div>

</body>
<script type="text/javascript">
    initPage()

    function initPage() {
        JQ("http://192.168.1.101:8085/dataInterface/UserProductionLine/search", {
                userWorkId: 1
            })
            .then(e => {
                e.data.sort((a, b) => {
                    return a.position - b.position
                })

                e.data.forEach(item => {

                    var html = `<div class="top_container">
                            <div style="font-size: 20px; font-weight: 600;">位置${item.position +1}</div>
                            <div class="item_container">`;
                    JQ("http://192.168.1.101:8085/dataInterface/WorkPost/search", {
                            productionLineInfoId: item.productionLineId
                        })
                        .then(e2 => {
                            var status = new Map();

                            e2.data.forEach(statusList => {
                                status.set(statusList.status, statusList.workPostName)
                            })


                            JQ("http://192.168.1.101:8085/dataInterface/UserPeople/search", {
                                    userProductionLineId: item.id
                                })
                                .then(e3 => {
                                    var len = 0
                                    console.log(e3);
                                    if (e3.data.length == 0) {
                                        for (let index = 0; index < 4; index++) {
                                            let workPostName = status.get(index)
                                            html += `<div class="item">
                                                    <div class="item_div" onclick="setPost(${item.id},${index})" style=" width:100%;height:100%;background: #FF5B5B;"></div>
                                                    <div style="text-align: center;">${workPostName}</div>
                                                    </div>`;
                                        }
                                        html += `</div></div>`
                                        $(".container").append(html);
                                    }
                                    e3.data.forEach(item2 => {

                                        JQ("http://192.168.1.101:8085/dataInterface/People/getInfo", {
                                            id: item2.peopleId
                                        }).then(e4 => {
                                            if (item2.workPostId != "") {
                                                var workPostName = status.get(e4.data[0].status);
                                                status.delete(e4.data[0].status)

                                                html += `<div class="item">
                                                    <div class="item_div" style=" background: #82AAFF; width:100%;height:100%;"> 
                                                    姓名：${e4.data[0].peopleName}<br> 
                                                    体力: ${e4.data[0].hp} </div>
                                                    <div style="text-align: center;">${workPostName}</div>
                                                    </div>`;
                                            }

                                            len++;
                                            if (len == e3.data.length) {

                                                status.forEach((value, key) => {
                                                    html += `<div class="item" >
                                                    <div class="item_div" onclick="setPost(${item.id},${key})" style=" background: #FF5B5B;width:100%;height:100%; "></div>
                                                    <div style="text-align: center;">${value}</div>
                                                    </div>`;
                                                })
                                                html += `</div></div>`
                                                $(".container").append(html);

                                            }

                                        })
                                    })


                                })
                        })
                });

            })
    }

    function setPost(userLineId, type) {
        JQ("http://192.168.1.101:8085/Interface/index/addUserPosition", {
                userLineId,
                type
            })
            .then(e => {
                console.log(e);
                alert(e.message)
                if (e.status == 200) {
                    $(".container").html("")
                    initPage()
                }

            })
    }
</script>

</html>